<template >
	<div class="contain-report">
		<div class="report-title">编辑试卷</div>
		<div class="report-search">
			<el-select placeholder="请选择班级" v-model="form.classId" style="width: 200px;margin-right: 20px" size="small" clearable @close="form.classId = null">
				<el-option v-for="item in classList" :key="item.id" :label="item.className" :value="item.id"></el-option>
			</el-select>
			<el-select placeholder="请选择实验室" v-model="form.laboratoryId" style="width: 200px;margin-right: 20px" size="small"  clearable @close="form.laboratoryId = null">
				<el-option v-for="item in laboratoryList" :key="item.id" :label="item.laboratoryName" :value="item.id"></el-option>
			</el-select>
			<el-input style="width: 200px"
					  size="small"
					  placeholder="请输入试卷名称"
					  v-model="form.name"
					  clearable
			>
			</el-input>
		</div>
		<div class="report-nav">
			<div class="nav-left">
				<p style="margin-right: 20px">题型</p>
				<el-tooltip  effect="dark" content="点击添加单选题" placement="top-start">
					<div class="left-btn" @click="addQuestion(1)">单选</div>
				</el-tooltip>
				<el-tooltip  effect="dark" content="点击添加多选" placement="top-start">
					<div class="left-btn" @click="addQuestion(2)">多选</div>
				</el-tooltip>
				<el-tooltip  effect="dark" content="点击添加判断" placement="top-start">
					<div class="left-btn" @click="addQuestion(3)">判断</div>
				</el-tooltip>
				<el-tooltip  effect="dark" content="点击添加主观题" placement="top-start">
					<div class="left-btn" @click="addQuestion(4)">主观题</div>
				</el-tooltip>
			</div>
			<div class="nav-right" @click="save">保 存</div>
		</div>
		<div  v-if="questionList.length === 0">
			<el-empty description="请单击题型进行添加"></el-empty>
		</div>
		<div class="report-question"  v-if="questionList.length !== 0" v-for="(item,index) in questionList" :key="index">
			<div class="close-box" @click="deleteQuestion(index)"></div>
			<div class="question-name">
				<p style="width: 50px">题 干:</p>
				<el-input  placeholder="请输入题目标题" v-model="item.name" size="small"></el-input>
			</div>
			<div class="question-choose" v-if=" item.type === 1 || item.type === 2 || item.type === 3">
				<p class="title">{{item.type === 1? '单选' : item.type === 2? '多选' : item.type === 3 ? '判断' : '主观' }}:</p>
				<div class="big-content" >
					<div class="content" v-for="(item1,index1) in item.answerList" :key="index1">
						<div class="left-box">
							<img v-if="item1.yes === 0" src = "../../assets/images/nochoose.png"  alt = "" >
							<img v-if="item1.yes === 1" src = "../../assets/images/choose.png"  alt = "" >
							<span :style="[{color : item1.yes === 0 ? '#ccc' :'#3591d4'}]">{{item1.answer}}</span>
						</div>
						<div class="right-box" >
							<span v-if="item1.yes === 0" @click="trueYes(index,index1)" style="color: #ccc;font-size: 12px">设为正确选项</span>
							<span v-if="item1.yes === 1" :style="[{color : item1.yes === 0 ? '#ccc' :'#3591d4'}]" style="font-size: 12px">正确选项</span>
							<img src = "../../assets/images/small.png"  @click="deleteChoose(index,index1)" >
						</div>
					</div>
					<div class="add-box" v-if="item.type === 1 || item.type === 2" @click="openAdd(index)">
						<img src = "../../assets/images/add.png" alt = "" >
						<span>添加选项</span>
					</div>
				</div>
			</div>
		
		</div>
		
		<el-dialog
				:show-close="false"
				:visible.sync="addChoose"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">添加选项</div>
				<div class="box-body">
					<el-form label-width="100px">
						<el-form-item label="选项名称:">
							<el-input placeholder="请输入选项名称" v-model="title"></el-input>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button type="primary" size="small"  @click="submitAddChoose"  style="margin-right: 20px">提 交</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
	
	</div>
	
</template >

<script >
    import {releaseDetails,editQuestions} from "../../api/questions";
    import {laboratoryList} from "../../api/notice";
    import {allClass} from "../../api/class";

    export default {
        name: "questionEdit",
		data(){
            return{
                form:{
                    classId: null,
                    content: [],
                    evaluationId: this.$route.query.id,
                    laboratoryId: null,
                    name: ""
				},
                questionList:[],
                laboratoryList:[],
                classList:[],
                addChoose:false,
                title:'',
                chooseIndex:null,
                determine:[
                    {answer:'正 确',yes:0},
                    {answer:'错 误',yes:0},
                ]
                
			}
		},
		mounted() {
            this.getClassList()
            this.getLaboratoryList()
            this.getReleaseDetails(this.$route.query.id)
        },
        methods:{
            async getLaboratoryList(){
                const { data } = await laboratoryList()
                if (data.code === 200){
                    this.laboratoryList = data.data
                }
            },
            async getClassList(){
                const { data } = await allClass()
                console.log(data)
                if (data.code === 200){
                    this.classList = data.data.data
                }
            },
  			async getReleaseDetails(id){
  			    const { data } = await releaseDetails(id)
                console.log(data)
				if (data.code === 200){
                    this.form.classId = data.data.data.classId
                    this.form.laboratoryId = data.data.data.laboratoryId
                    this.form.name = data.data.data.name
					this.questionList = data.data.data.evaContents
					this.questionList.forEach(item => {
					    if (item.type === 1 || 2 || 3){
					        item.content = JSON.parse(item.content)
						}
					    if (item.type === 2){
                            item.answer = JSON.parse(item.answer)
						}
					    item.answerList =  item.content
					})
				}
			},
            addQuestion(val){
                if (val === 1|| val === 2){
                    this.questionList.push(
                        {
                            answer: null,
                            content: "",
                            name: "",
                            type: val,
                            answerList:[]
                        }
                    )
                }else if(val === 3) {
                    this.questionList.push(
                        {
                            answer: null,
                            content: "",
                            name: "",
                            type: val,
                            answerList:this.determine
                        }
                    )
                }else {
                    this.questionList.push(
                        {
                            answer: null,
                            content: "",
                            name: "",
                            type: val,
                        }
                    )
                }

            },
            deleteQuestion(index){
                this.$confirm('删除该试题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    for(let i =0;i < this.questionList.length; i++){
                        if (i === index){
                            this.questionList.splice(i,1)
                        }
                    }
                })
            },
            trueYes(index,j){
                this.$confirm('将该选项设为正确答案, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    for(let i =0;i < this.questionList.length; i++){
                        if (this.questionList[index].type === 1 || this.questionList[index].type === 3){
                            if (i === index){
                                for (let k = 0;k<this.questionList[index].answerList.length;k++){
                                    if (j === k){
                                        this.questionList[index].answerList[k].yes = 1
                                    }else {
                                        this.questionList[index].answerList[k].yes = 0
                                    }
                                }

                            }
                        }else if(this.questionList[index].type === 2){
                            if (i === index){
                                for (let k = 0;k<this.questionList[index].answerList.length;k++){
                                    if (j === k){
                                        this.questionList[index].answerList[k].yes = 1
                                    }
                                }
                            }
                        }

                    }
                })
            },
            deleteChoose(index,j){
                this.$confirm('删除该选项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        for(let i =0;i < this.questionList.length; i++){
                            if (i === index){
                                for(let k = 0;k < this.questionList[i].answerList.length; k++) {
                                    if (j === k){
										this.questionList[i].answerList.splice(k, 1)
                                        this.$forceUpdate();
                                        console.log( this.questionList[i].answerList)
                                    }
                                }
                            }
                        }
                })
            },
            openAdd(index){
                this.addChoose = true
                this.chooseIndex = index
            },
            submitAddChoose(){
                if (!this.title){
                    this.$message.error('请填写选项名称!!!')
                }else{
                    this.questionList[this.chooseIndex].answerList.push({answer:this.title,yes:0})
                    this.addChoose = false
                    this.title = ''
                }
            },
            async save(){
                let arr = []
                for (let i = 0;i<this.questionList.length;i++){
                    this.questionList[i].content = JSON.stringify(this.questionList[i].answerList)
                    if (this.questionList[i].type === 1 || this.questionList[i].type === 3){
                        for (let j = 0;j<this.questionList[i].answerList.length;j++){
                            if (this.questionList[i].answerList[j].yes === 1){
                                this.questionList[i].answer = this.questionList[i].answerList[j].answer
                            }
                        }
                    }else if (this.questionList[i].type === 2 ){
                        for (let j = 0;j<this.questionList[i].answerList.length;j++){
                            if (this.questionList[i].answerList[j].yes === 1){
                                arr.push(this.questionList[i].answerList[j].answer)
                                this.questionList[i].answer = JSON.stringify(arr)
                            }
                        }
                    }

                }
                for (let i = 0;i <this.questionList.length;i++ ){
                    if (!this.questionList[i].answer){
                        return  this.$message.warning('请给题目设置正确答案!!!')
                    }
                }
                // console.log(this.questionList)
                this.form.content = this.questionList
                const { data }  =await editQuestions(this.form)
                console.log(data)
                if (data.code === 200){
                    this.$router.go(-1)
                }
            }
		}
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.dialog-box{
			width: 100%;
			min-height: 50vh;
			border-radius: 5px;
			overflow: hidden;
			.box-top{
				width: 100%;
				height: 10vh;
				background-image: linear-gradient(to left, #3591d4 0%, #50b3da 50%, #85f9e6 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26px;
				color: #fff;
			}
			.box-body{
				width: 100%;
				height: 80%;
				padding:5% 10%;
				box-sizing: border-box;
				background-color: #ffffff;
				/deep/.el-input__inner{
					border: none;
					background-color: #ecedef;
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #ecedef;
				}
				.form-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.file-list{
					margin-top: 20px;
					width: 100%;
					.file-box{
						margin-top: 10px;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.report-title {
			font-size: 22px;
			color: #333;
		}
		.report-search{
			width: 100%;
			margin: 20px auto;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			/deep/.el-input__inner{
				border-radius: 20px;
			}
		}
		.report-nav{
			width: 100%;
			margin: 20px auto;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.nav-left{
				display: flex;
				align-items: center;
				p{
					color: #000;
					font-size: 16px;
				}
				.left-btn{
					width: 80px;
					height: 30px;
					margin: 0 10px;
					border-radius: 15px;
					text-align: center;
					line-height: 30px;
					color: #333;
					cursor: pointer;
					background-color: #ffffff;
					box-shadow: 0 0 5px 0 #cccccc;
					transition: all .5s;
					&:hover{
						background-color: #7fd1e5;
						color: #ffffff;
					}
				}
			}
			.nav-right{
				width: 80px;
				height: 30px;
				border-radius: 15px;
				text-align: center;
				line-height: 30px;
				color: #333;
				cursor: pointer;
				background-color: #7fd1e5;
			}
		}
		.report-question{
			position: relative;
			width: 100%;
			border-radius: 20px;
			margin-bottom: 20px;
			padding: 20px;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0 0 5px 0 #cccccc;
			.close-box {
				position: absolute;
				right: -10px;
				top: -10px;
				width: 30px;
				height: 30px;
				background: url("../../assets/images/delete.png") no-repeat;
				background-size: 100%,100%;
				cursor: pointer;
			}
			.question-name{
				width: 100%;
				display: flex;
				align-items: center;
				/deep/.el-input__inner{
					border-radius: 0;
					border-left: none;
					border-top: none;
					border-right: none;
					padding: 0;
				}
			}
			.question-choose{
				margin-top: 20px;
				width: 100%;
				display: flex;
				.title{
					width: 50px;
				}
				.big-content{
					width: calc(100% - 50px);
					.content{
						width: 100%;
						margin-bottom: 10px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left-box{
							display: flex;
							align-items: center;
							color: #999;
							img{
								width: 15px;
								height: 15px;
								margin-right: 10px;
								cursor: pointer;
							}
						}
						.right-box{
							display: flex;
							align-items: center;
							span{
								cursor: pointer;
							}
							img{
								width: 15px;
								height: 15px;
								margin-left: 10px;
								cursor: pointer;
							}
						}
					}
					.add-box{
						display: flex;
						align-items: center;
						cursor: pointer;
						img{
							width: 20px;
							height: 20px;
							margin-right: 5px;
						}
					}
				}
				
			}
			.zhuguan{
				margin-top: 20px;
				/deep/.el-textarea__inner{
					border: none;
					background-color: #f3f3f3;
				}
			}
		}
	}
</style >
